<template>
  <div class="Index">
    <h4 class="th-title" style="color: #FFF;">Hi~ 树藤与海岛，欢迎回来！<a class="float-right btn-link" style="color: #FFF;margin-right: 5px;" href="/work/usercenter.secure/index.html">安全中心</a></h4>
    <el-row :gutter="10" style="margin-top: -5px;">
      <el-col :span="16">
        <el-card shadow="never">
          <h4 class="th-title">企业公告 <a class="float-right btn-link" href="/work/usercenter.secure/index.html">查看更多</a></h4>
          <el-empty description="暂无公告信息" :image-size="120"></el-empty>
        </el-card>
        <el-card shadow="never" style="margin-top: 10px;">
          <h4 class="th-title">工作台 <a class="float-right btn-link" href="/work/usercenter.secure/index.html">快捷键设置</a></h4>
          <el-empty description="暂无公告信息" :image-size="120"></el-empty>
        </el-card>
      </el-col>
      <el-col :span="8" class="card">
        <div class="user-card">
          <div class="user-info">
            <el-avatar class="float-left" :size="50" src="https://oa.stgeek.cn/static/images/icon/enterprise_user.svg"></el-avatar>
            <div style="text-align: left!important;margin-left:60px;margin-top:-10px;">
              <h4 style="color: #FFF;">树藤与海岛</h4>
              <h6 style="margin-top:-10px;">No:150323565</h6>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <div style="margin-top:40px;">
          <div class="text-center">
            <span class="third-party-btn">
              按钮
            </span>
            <el-divider direction="vertical"></el-divider>
            <span class="third-party-btn">
              按钮
            </span>
            <el-divider direction="vertical"></el-divider>
            <span class="third-party-btn">
              按钮
            </span>
          </div>
        </div>
        <div style="padding: 0 15px;margin-top: -5px;">
          <el-divider></el-divider>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      title: "Hello Vue!!",
    };
  },
};
</script>

<style>
.Index {
  max-width: 960px;
  padding-right: 18%;
  padding-left: 18%;
  margin-top: calc(100vh * 0.08);
  margin-right: auto;
  margin-left: auto;
}
.Index::before {
  content: " ";
  display: block;
  width: 100%;
  height: 187px;
  background-image: url("https://cloudcache.tencentcs.com/qcloud/tea/app/overview.6bcfd5ac8b153a95aaf95ecca9b23e53.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: top;
  background-color: #0e1621;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: -1;
}
.user-card {
  background: url('https://oa.stgeek.cn/work/widget/userCardBackground');
  background-color: #fff;
  background-size: 100% 180px;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 130px;
  padding: 0 15px;
}
.card {
  height: 100%;
  padding: 0 !important;
  border: 1px solid var(--el-card-border-color);
  border-radius: var(--el-card-border-radius);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-background-color: var(--el-color-white);
}
.user-card-image {
  width: 100%;
  display: block;
  margin: -10px -15px 0px -15px;
}
.user-info {
  padding-top: 105px;
}
.third-party-btn {
  margin: 0 10px;
}
</style>